<template>
    <yh-dialog drag title="添加银行" :close-on-click-modal="false" :before-close="closeDialog" :visible="bankCodeDialog" width="600px">
        <div>
            <el-form label-width="100px" :model="queryForm" ref="queryBankForm">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="银行代码:" prop="bankCode">
                            <el-input v-model="queryForm.bankCode" placeholder="" clearable size="mini"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="银行名称:" prop="bankName">
                            <el-input v-model="queryForm.bankName" placeholder="" clearable size="mini"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 5px">
                    <el-col :span="12">
                        <el-form-item label="银行分类:" prop="bankType1">
                            <el-select v-model="queryForm.bankType1" placeholder="" :disabled="disabled" size="mini" filterable>
                                <el-option v-for="(sLabel, sKey) in bankTypePojo" :label="`${sKey} ${sLabel}`" :value="sKey" :key="sKey" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="来源类型" prop="sourceType">
                            <el-select v-model="queryForm.sourceType" placeholder="" :disabled="disabled" size="mini" filterable>
                                <el-option v-for="(mLabel, mKey) in sourceTypePojo" :label="`${mKey} ${mLabel}`" :value="mKey" :key="mKey" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>

            <div style="margin-top: 5px; text-align: right">
                <el-button size="mini" @click="resetForm">重 置</el-button>
                <el-button size="mini" type="primary" @click="getBankList(1)">搜 索</el-button>
            </div>
            <vxe-table
                v-loading="stockSearchLoading"
                :data="bankTable"
                border
                auto-resize
                size="mini"
                style="width: 100%"
                height="250px"
                header-align="center"
            >
                <vxe-column title="操作" width="60">
                    <template slot-scope="scope">
                        <el-button icon="el-icon-check" size="mini" @click="bankSearchSubmit(scope.row)" type="primary"></el-button>
                    </template>
                </vxe-column>
                <vxe-column field="bankCode" title="银行代码" show-overflow></vxe-column>
                <vxe-column field="bankName" title="银行名称" show-overflow></vxe-column>
                <vxe-column field="bankType1" title="银行分类1" show-overflow>
                    <template slot-scope="scope">
                        <span>{{ bankTypePojo[scope.row.bankType1] }}</span>
                    </template>
                </vxe-column>
                <vxe-column field="sourceType" title="来源类型">
                    <template slot-scope="scope">
                        <span>{{ sourceTypePojo[scope.row.sourceType] }}</span>
                    </template>
                </vxe-column>
            </vxe-table>

            <div class="pagination">
                <el-pagination
                    background
                    @current-change="getBankList"
                    layout="total, prev, pager, next"
                    :current-page="pageVO.currentPage"
                    :page-size="pageVO.pageSize"
                    :total="pageVO.total"
                >
                </el-pagination>
            </div>
        </div>
    </yh-dialog>
</template>
<script lang="ts">
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import DictionConstUtil, { objToArr } from '@/utils/diction-const-util';

export interface pages {
    total?: number;
    pageSize?: number;
    currentPage?: number;
}
@Component({
    name: 'SearchBank',
})
export default class SearchBank extends Vue {
    @Prop()
    bankCodeDialog: boolean;
    bankTable: any[] = [];

    @Prop()
    queryBankForm: any;

    // 证券查询表单
    queryForm: any = {};

    private pageVO: pages = {
        total: 0,
        pageSize: 25,
        currentPage: 1,
    };

    private bankSearchLoading = false;
    private DictionConstUtil = DictionConstUtil;

    private bankTypePojo: any = {};
    private sourceTypePojo: any = {};

    mounted() {
        this.$set(this, 'bankTypePojo', DictionConstUtil.BankType);
        this.$set(this, 'sourceTypePojo', DictionConstUtil.SourceType);
    }

    @Watch('queryBankForm', { immediate: true, deep: true })
    private async getBank() {
        this.queryForm = JSON.parse(JSON.stringify(this.queryBankForm));
        this.getBankList(this.pageVO.currentPage);
    }

    // 重置表单
    private resetForm() {
        (this.$refs.queryBankForm as any).resetFields();
    }

    // 表格列双击事件
    private bankSearchSubmit(row) {
        this.closeDialog();
        this.$emit('getBank', row);
    }

    // 关闭对话框
    private closeDialog() {
        this.$emit('closeBankDialog');
    }

    // 获取证券代码
    private getBankList(val: number) {
        this.$axios
            .post('/baseInfomation/bank/list', {
                ...this.queryForm,
                paging: {
                    currentPage: val,
                    pageSize: 25,
                },
            })
            .then((res: any) => {
                this.bankTable = res.list;
                this.pageVO.total = res.total;
            });
    }
}
</script>
<style lang="scss" scoped>
/deep/ .el-dialog .el-dialog__body {
    max-height: 70vh;
}
/deep/ .el-form-item {
    margin-bottom: 5px !important;
}
tbody {
    .el-button {
        padding: 0;
    }

    .el-button--mini {
        padding: 2px 8px;
    }
}
</style>
